<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const leftData = [
  {
    label: '信息管理',
    path: '/home'
  },
  {
    label: '终端控制',
    path: '/terminal'
  },
  {
    label: '水电数据',
    path: '/waterData'
  }
]

const rightData = [
  {
    label: '房间实时数据',
    path: '/roomData'
  },
  {
    label: '报表统计',
    path: '/report'
  },
  {
    label: '直饮水管控',
    path: '/waterControl'
  }
]

const router = useRouter()
function handle(path) {
  router.push(path)
}
</script>

<template>
  <div class="data-wrapper">
    <div class="data-title">
      <span>数据中心</span>
    </div>
    <div class="content-left">
      <div class="item" v-for="(item, index) in leftData" :key="index" @click="handle(item.path)">
        {{ item.label }}
      </div>
    </div>
    <div class="content-right">
      <div class="item" v-for="(item, index) in rightData" :key="index" @click="handle(item.path)">
        {{ item.label }}
      </div>
    </div>
    <div class="payment" @click="router.push('/payment')">支付宝沙箱</div>
  </div>
</template>

<style lang="scss" scoped>
.data-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  background:
    url('@/assets/image/data-center/icon-background.png') no-repeat center/100% 100%,
    url('@/assets/image/data-center/icon-wrap.gif') no-repeat center center,
    url('src/assets/image/data-center/icon-bottom.png') no-repeat center bottom,
    url('@/assets/image/common/background-image.png') no-repeat center/100% 100%;

  overflow: hidden;
  .data-title {
    font-size: 70px;
    margin-top: 20px;
    font-weight: 600;
    span {
      letter-spacing: 60px;
      background-image: linear-gradient(90deg, #d8eff8, #6bcef5);
      color: transparent;
      background-clip: text;
      font-family: 'PMZDR';
    }
  }
  .content-left {
    position: absolute;
    left: 20%;
    top: 50%;
    transform: translateY(-50%);
    .item {
      width: 150px;
      height: 150px;
      margin-top: 35px;
      margin-left: 40px;
      border: 1px solid rgb(97, 94, 94);
      border-radius: 50%;
      color: #6bcef5;
      font-size: 20px;
      letter-spacing: 5px;
      @include lineHeight(150px);
      cursor: pointer;
      animation: dataCenterItem 1.2s linear infinite alternate,dataCenterScale 4s linear infinite alternate;
      &:nth-child(2) {
        transform: translateX(-80%);
        animation: dataCenterItem 0.8s linear infinite alternate;
      }
      &:nth-child(3) {
        animation: dataCenterItem 1.5s linear infinite alternate,dataCenterScale 4s linear infinite alternate;
      }
    }
  }
  .content-right {
    position: absolute;
    right: 20%;
    top: 50%;
    transform: translateY(-50%);
    .item {
      width: 150px;
      height: 150px;
      margin-top: 35px;
      margin-right: 40px;
      border: 1px solid rgb(97, 94, 94);
      border-radius: 50%;
      color: #6bcef5;
      font-size: 20px;
      letter-spacing: 3px;
      @include lineHeight(150px);
      animation: dataCenterItem 1.2s linear infinite alternate,dataCenterScale 4s linear infinite alternate;
      &:nth-child(2) {
        animation: dataCenterItem 0.8s linear infinite alternate;
        transform: translateX(80%);
      }
      &:nth-child(3) {
        animation: dataCenterItem 1.5s linear infinite alternate,dataCenterScale 4s linear infinite alternate;
      }
    }
  }
  .payment {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 50px;
    border-radius: 30px;
    color: #fff;
    font-size: 30px;
    letter-spacing: 5px;
    @include lineHeight(50px);
    background-color: #6bcef5;
    color: transparent;
    background-clip: text;
    font-weight:bold;
    cursor: pointer;
  }
}
</style>
